<html>

<head>
    <meta charset="UTF-8">
    <title>淘兴趣</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css" />
    <script type="text/javascript" src="/javascripts/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="/javascripts/bootstrap.min.js"></script>
</head>

<style>
    .pt-5 {
        background-image: url(images/bj.jpg);
        background-repeat: no-repeat;
    }

    .avatar {
        height: 100px;
    }

    h6 {
        margin-top: 20px;
    }
</style>

<body>

    <% include header %>

    <div class="container mt-2">
        <div class="pt-5 text-center w-100">
            <div class="user_img m-auto">

                <img src="<%= userData.avatarFileName != null ? 'imageUploaded/'+userData.avatarFileName : 'images/init_avatar.jpg' %>"
                    class="img-thumbnail rounded-circle avatar" />

            </div>
            <div class="user_nick text-white mt-4">
                <%= userData.account %> </div>
        </div>
        <div class="container">
            <div class="w-80 m-auto">
                <h2 style="margin-top: 40px;">个人资料</h2>
                <table class="table">
                    <tr>
                        <td>账号：</td>
                        <td><%= userData.account %></td>
                    </tr>
                    <tr>
                        <td>性别：</td>
                        <td><%= userData.sex == 0 ? '男' : '女' %></td>
                    </tr>
                    <tr>
                        <td>邮箱：</td>
                        <td><%= userData.email %></td>
                    </tr>
                    <tr>
                        <td>用户id：</td>
                        <td><%= userData.id %></td>
                    </tr>
                    <tr>
                        <td>用户权限：</td>
                        <td><%= userData.level == 0 ? '普通用户' : '管理员' %> </td>
                    </tr>
                    <tr>
                        <td>个人简历：</td>
                        <td><%= userData.resume %> </td>
                    </tr>

                </table>
            </div>
        </div>


        <div class="container">
            <div class="w-80 m-auto">
                <h2 style="margin-top: 20px;">增加新的趣点</h2>

                <form action="addTopic" method="POST" class="form" enctype="multipart/form-data">

                    <form role="form">
                            <select class="form-control" name="fuck">
                                <% interest.forEach((item)=>{ %>
                                <option value="<%= item.id %>"><%= item.name %></option>
                                <% }) %>
                            </select>

                    <h6>趣点标题</h6>
                    <input type="text" name="title" name="resume" class="form-control" placeholder="请输入标题" />
                    <p id='tips-tipic-title'></p>

                    <h6>趣点简介</h6>
                    <input type="text" name="discribe" name="resume" class="form-control" placeholder="请输入标题" />
                    <p id='tips-tipic-discribe'></p>

                    <h6>趣点头像</h6>
                    <input type="file" name="img" accept="image/*" class="form-control" />

                    <input type="submit" name="submit" style="margin-top: 20px;" />
                </form>
            </div>
        </div>
    </div>
    <!--尾部-->
    <div class="text-center p-2 small">
        <a>服务条款</a><span>|</span>
        <a>隐私策略</a><span>|</span>
        <a>广告服务</a><span>|</span>
        <a>客服中心</a>
    </div>
    <div class="text-center p-2 small">
        淘兴趣——关注你感兴趣的人和事
    </div>



    <script>
        let d = <%- JSON.stringify(messages) %>;
        d.forEach((item) => {
            console.log(item);
            document.getElementById(item.type).innerText = item.msg;
        })
    </script>
    <% removeMessage() %>
</body>

</html>